<template>
  <div class="discover">
    <HeaderTop name="发现" />
    <div class="discover-con">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-tabs
          v-model:active="active"
          swipeable
          sticky
          color="rgb(193, 67, 116)"
          title-active-color="rgb(193, 67, 116)"
        >
          <van-tab v-for="(i, index) in title" :title="i" :key="index">
            <ul class="discover_ul">
              <li
                v-for="item in articleall"
                :key="item.id"
                @click="goFindDetail(item.id)"
              >
                <img :src="item.head_pic" />
                <h5>{{ item.title }}</h5>
                <h6>{{ item.subtitle }}</h6>
                <p class="sort_name">{{ item.sort_name }}</p>
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </van-pull-refresh>
    </div>
    <Loading :isShow="show" />
  </div>
</template>

<script setup>
import { reqArticle } from "@/api/discover";
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import Loading from "@/components/loading.vue";
import HeaderTop from "@/components/HeaderTop.vue";
const router = useRouter();
const active = ref(0);
let show = ref(true);
const articleall = ref("");
const knowledge = ref("");
const lookWorld = ref("");
const intelligent = ref("");
const title = reactive(["全部", "涨知识", "看世界", "达人说"]);
const loadArticle = async (sort_id) => {
  // sort_id 0是 number 类型, 0:全部 5:长知识 6:看世界 7:达人说
  // page    1否 number 页码
  // size    6否 number 每一页数据个数;
  const result = await reqArticle({ sort_id, size: 20 });
  console.log(result);
  if (result.code == 0) {
    show.value = false;
    articleall.value = result.data.list;
  }
};
loadArticle(0);
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
};
watch(active, async () => {
  console.log(active.value);
  if (active.value === 1) {
    loadArticle(5);
  } else if (active.value === 2) {
    loadArticle(6);
  } else if (active.value === 3) {
    loadArticle(7);
  }
});
const goFindDetail = (id) => {
  console.log(id);
  router.push("/findDetail/" + id);
};
</script>

<style scoped>
.discover-con {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0.3rem;
  margin-top: 44px;
}
.discover_ul li img {
  width: 100%;
  height: 3.8rem;
  display: block;
}
.discover_ul li {
  text-align: center;
  margin-bottom: 0.6rem;
  position: relative;
}
.discover_ul li h5 {
  width: 100%;
  font-weight: 500;
  font-size: 0.3rem;
  color: #333;
  margin: 0.32rem 0 0.22rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discover_ul li h6 {
  width: 100%;
  font-weight: 500;
  font-size: 0.24rem;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sort_name {
  font-size: 0.24rem;
  position: absolute;
  right: 0.35rem;
  top: 0.2rem;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0.05rem;
  padding: 0.05rem 0.1rem;
}
</style>
